<template>
	<view class="content">
		<view class="title">
			<view style="width: 90%;">
				<view style="height: 70%;"></view>
				<p style="color: white;  font-size: 40rpx;margin-left: 20rpx;">Hi,下午好</p>
			</view>
			<view style="width: 10%;display: flex;justify-content: center;align-items: center;">
				<image class="setIcon" src="../../static/tu/my_setting.png"></image>
			</view>
		</view>
		<view class="userMsg">
			<view style="display: flex;flex-direction:row;padding: 8% 4%;">
				<u-avatar class="headImage" :src="headImg" shape="circle" size="35"></u-avatar>
				<view style="display: flex;justify-content: center;align-items: center;margin-left: 3%;">
					<p v-if="name==null">
						<span class="login" @tap="regAndLogin()">登录</span>/<span class="register" @tap="regAndLogin()">注册</span>
					</p>
					<p v-else>
						<span>{{name}}</span>
					</p>
				</view>
			</view>
			<view>
				<u-row class="rowMsg">
					<u-col span="4">
						<view class="numMsg">0</view>
						<view class="titleMsg">我的咨询</view>
					</u-col>
					<u-col span="4">
						<view class="numMsg">0</view>
						<view class="titleMsg">我的卡劵</view>
					</u-col>
					<u-col span="4">
						<view class="numMsg">0</view>
						<view class="titleMsg">浏览历史</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="itemTop">
			<u-cell-group v-for="(item, index) in topList" :key="index" style="margin:0 4%;">
				<u-cell :title="item.name" :isLink="true">
					<u-icon slot="icon" size="16" :name="item.url"></u-icon>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="itemCenter">
			<u-cell-group v-for="(item, index) in centerList" :key="index" style="margin:0 4%;">
				<u-cell :title="item.name" :isLink="true">
					<u-icon slot="icon" size="16" :name="item.url"></u-icon>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="itemBottom">
			<u-cell-group v-for="(item, index) in bottomList" :key="index" style="margin:0 4%;">
				<u-cell :title="item.name" :isLink="true">
					<u-icon slot="icon" size="16" :name="item.url"></u-icon>
				</u-cell>
			</u-cell-group>
		</view>
		<view style="height: 120rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:sessionStorage.userName,
				headImg: '../../static/tu/my_head.png',
				topList: [{
					name: "我的预约",
					url: "../../static/tu/my_item1.png",
				}, {
					name: "我的订单",
					url: "../../static/tu/my_item2.png",
				}, {
					name: "我的分期",
					url: "../../static/tu/my_item3.png",
				}, {
					name: "我的优惠",
					url: "../../static/tu/my_item4.png",
				}],
				centerList: [{
					name: "常用工具",
					url: "../../static/tu/my_item5.png",
				}, {
					name: "我的活动",
					url: "../../static/tu/my_item6.png",
				}],
				bottomList: [{
					name: "我的咨询",
					url: "../../static/tu/my_item7.png",
				}, {
					name: "帮助中心",
					url: "../../static/tu/my_item8.png",
				}]
			}
		},
		methods: {
			regAndLogin() {				
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.content {
		background-image: url("../../static/tu/rental cars_top.png");
		width: 100%;
		height: 183px;
	}

	.title {
		display: flex;
		justify-content: center;
		flex-direction: row;
		height: 140rpx;
	}

	.setIcon {
		width: 40rpx;
		height: 43rpx;
	}
	.rowMsg{
		padding-bottom:5%;
	}
	.userMsg {
		width: 94%;
		/* padding: 0 3%; */
		height: auto;
		background-color: #fefefe;
		border-radius: 24upx;
		/*  阴影 */
		box-shadow: 0 5upx 40upx rgba(0, 0, 0, 0.15);
		margin: 40upx 3% 0upx 3%;
	}

	.numMsg {
		text-align: center;
	}

	.titleMsg {
		font-size: 18%;
		text-align: center;
	}

	.itemTop {
		width: 94%;
		/* padding: 0 3%; */
		height: auto;
		background-color: #fefefe;
		border-radius: 24upx;
		/*  阴影 */
		box-shadow: 0 0 20upx rgba(186, 197, 241, 1.0);
		margin: 7% 0 0upx 3%;
	}

	.itemCenter {
		width: 94%;
		/* padding: 0 3%; */
		height: auto;
		background-color: #fefefe;
		border-radius: 24upx;
		/*  阴影 */
		box-shadow: 0 0 20upx rgba(186, 197, 241, 1.0);
		margin: 7% 0 0upx 3%;
	}

	.itemBottom {
		width: 94%;
		/* padding: 0 3%; */
		height: auto;
		background-color: #fefefe;
		border-radius: 24upx;
		/*  阴影 */
		box-shadow: 0 0 20upx rgba(186, 197, 241, 1.0);
		margin: 7% 0 0upx 3%;
	}
</style>